<template>
	<view id="message">
		<view class="message_menu">
			<view class="message_menu_classify" @click="gotoLikes()">
				<view class="classify_icon thumbType">
					<u-icon name="thumb-up-fill" size="40" color="#fff"></u-icon>
				</view>
				<view class="badgeType">
					<u-badge max="99" bgColor="red" :isDot="false" type="success" :value="TheLikesReceived.count"
						v-if="TheLikesReceived.count"></u-badge>
					<view style="visibility: hidden;" v-else>
						0
					</view>
				</view>
				<view class="iconName">动态点赞</view>
			</view>
			<view class="message_menu_classify" @click="gotoComments()">
				<view class="classify_icon">
					<u-icon name="chat-fill" size="40" color="#fff"></u-icon>
				</view>
				<view class="badgeType">
					<u-badge max="99" bgColor="red" :isDot="false" type="success" :value="review.count"
						v-if="review.count"></u-badge>
					<view style="visibility: hidden;" v-else>
						0
					</view>
				</view>
				<view class="iconName">动态收藏</view>
			</view>
			<view class="message_menu_classify" @click="Stephen()">
				<view class="classify_icon heartType">
					<u-icon name="heart-fill" size="40" color="#fff"></u-icon>
				</view>

				<view class="badgeType"><u-badge max="99" bgColor="red" :isDot="false" type="success"
						:value="roduction.count" v-if="roduction.count"></u-badge>
					<view style="visibility: hidden;" v-else>
						0
					</view>
				</view>
				<view class="iconName">关注收藏</view>
			</view>
			<view class="message_menu_classify" @click="systematic()">
				<view class="classify_icon chatType">
					<u-icon name="setting-fill" size="40" color="#fff"></u-icon>
				</view>
				<view class="badgeType">
					<u-badge max="99" bgColor="red" :isDot="false" type="success" :value="Systemds.count"
						v-if="Systemds.count"></u-badge>
					<u-badge max="99" bgColor="red" type="success" value="0" showZero
						v-else-if="Systemds.count == 0"></u-badge>
					<view style="visibility: hidden;" v-else>
						0
					</view>
				</view>
				<view class="iconName">系统消息</view>
			</view>
		</view>
		<view class="message_news">
			<!-- <messageStrip :list="messageStripList"></messageStrip> -->

			<view class="AsteenPlan" v-for="(item,index) in government" :key="index" @click="Material(item)">
				<view class="environment">
					<view class="AsteenPlanLiberates">
						<image :src="item.headimg" mode=""></image>
					</view>
					<view class="bettertoSend">
						<view class="ThMost">
							{{item.nickname}}
							<image v-if="item.base_sex == 1" src="../../static/user/male.png" mode="widthFix"></image>
							<image v-else src="../../static/user/females.png" mode="widthFix"></image>
						</view>
						<view class="yourEngine">
							{{item.msg.data}}
						</view>
					</view>
				</view>
				<view class="development">
					<view class="">
						{{item.msg.time}}
					</view>
					<view class="" v-if="item.to_wd_count" style="margin-top: 30rpx;text-align: right; display: block; color: #ff0000;">
						未读消息：{{item.to_wd_count}}
					</view>
				</view>
			</view>
			<view style="margin-top: 200rpx;">
				<u-empty v-if="government.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import {
		timestampToDate
	} from '@/store/upload.js'
	import Ws from '@/utils/socket.js'
	export default {
		data() {
			return {
				messageStripList: [],
				TheLikesReceived: {},
				review: {},
				roduction: {},
				Systemds: {},
				government: [],
				userId: null, //个人的用户

			}
		},
		computed: {
			...mapState('user', ['userInfo', 'webSocket', 'messageTouser', 'message']),
		},
		onShow() {
			this.GetLikes()
			this.WanhuaMirror()
			this.userId = this.userInfo.id
		},
		onLoad() {
			this.GetLikes()
			this.WanhuaMirror()
			this.userId = this.userInfo.id
		},
		
		watch: {
			message(res) {
				if (res) {
					const data = JSON.parse(res.data)
					if (data.type == 'text') {
					
						this.government.forEach(item => {
							if (item.toid == data.fromid) {
								item.msg = data
								data.time = timestampToDate(data.time)
								item.to_wd_count++
							}
						})
					}
				}
			}
		},
		methods: {
			...mapActions('user', ['getUserInfo', 'getMessageTouser']),
			...mapMutations('user', ['getMessageTouser']),
			WanhuaMirror() {
				this.$api.messageList({
					id: this.userInfo.id
				}).then(res => {
					console.log(res, '数组数组')
					this.government = res.data.filter(item => item.toid !== this.userInfo.id);
					console.log(this.government,'叔叔')
				})
			},


			Material(item) {
				this.getMessageTouser(item)
				item.to_wd_count = 0
				uni.navigateTo({
					url: '/pages/content/privateChat/privateChat'
				})
			},
			gotoComments(index) {
				uni.navigateTo({
					url: "/pages/home/commentsReceived/commentsReceived",
				})
			},
			gotoLikes() {
				uni.navigateTo({
					url: "/pages/home/likesReceived/likesReceived"
				})
			},
			Stephen() {
				uni.navigateTo({
					url: "/pages/home/AttentionCollection/AttentionCollection"
				})
			},
			systematic() {
				uni.navigateTo({
					url: "/pages/home/structured/structured"
				})
			},
			GetLikes() {
				console.log('动态')
				this.$api.PeopleLists().then(res => {
					console.log(res, 'res动态点赞列表')
					this.TheLikesReceived = res.data
				})
				this.$api.Dynamic().then(res => {
					console.log(res, 'res动态收藏列表')
					this.review = res.data
				})
				this.$api.attentionNotification().then(res => {
					console.log(res, 'res用户关注收藏列表')
					this.roduction = res.data
				})
				this.$api.Designated().then(res => {
					console.log(res, '系统消息')
					this.Systemds = res.data
				})
			},
					
			// GetLikes(){
			// 	this.$api.PeopleLists().then(res=>{
			// 	     console.log(res,'res')
			// 		 this.list = res.data.list
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}

	#message {
		width: 100%;
	}

	.message_menu {
		width: 100%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		padding-top: 30rpx;
		background-color: #ffffff;

		.message_menu_classify {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.badgeType {
				position: relative;
				left: 23px;
				top: -12px;
			}

			.classify_icon {
				background: #a9d58a;
				padding: 10rpx;
				border-radius: 30rpx;
			}

			.thumbType {
				background: #f3aa1b;
			}

			.chatType {
				background: #70a8ff;
			}

			.heartType {
				background: #ed797a;
			}

			.iconName {
				margin: -15rpx 0 20rpx 0;
				color: #db995f;
			}
		}
	}

	.message_news {
		margin: 20rpx 0;

		.AsteenPlan {
			padding: 20rpx;
			background-color: #ffffff;
			border-bottom: 1rpx solid #eeeeee;
			display: flex;
			justify-content: space-between;

			.environment {
				display: flex;

				.AsteenPlanLiberates {
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 20rpx;
						display: block;
						margin-right: 20rpx;
					}
				}

				.bettertoSend {
					.ThMost {
						font-size: 32rpx;
						color: #333333;
						display: flex;
						align-items: center;
						font-weight: bolder;

						image {
							margin-left: 10rpx;
							display: block;
							width: 32rpx;
							height: 32rpx;
						}
					}

					.yourEngine {
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #999999;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: block;
						width: 300rpx;
					}
				}
			}

			.development {
				color: #cfcfcf;
				font-size: 27rpx;
			}
		}
	}
</style>